
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>

</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            用户信息修改
        </div>
        <div class="container-fluid common_con">
            <form class="form-horizontal article_form" id='myform'>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">用户名称：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="username" value="李思思" name='username'>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">昵称：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="nickname" name="nickname" value="思思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="email" name="email" value="lisisi@126.com">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">用户图标：</label>
                    <div class="col-sm-10">
                        <img src="images/2.jpg" alt="" class="user_pic" id='img'>
                        <input type="file" id="user_pic" name='user_pic'>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">密码：</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="password" name='password' value="12345678">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-success">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>



    <script>
        //1 获取用户信息(一进来就拿到用户信息)
        $(function () {
            $.ajax({
                url: 'http://localhost:8000/admin/userinfo_get',
                data: {},
                success: function (res) {
                    console.log(res);
                    $.each(res.data, function (key, val) {
                        console.log(key, val);
                        if (key === 'user_pic') {
                            $("#img").prop('src', val)
                        }
                        $('#' + key).val(val) //每一个输入框里面的内容

                    })


                }
            })

            // 2编辑用户信息 
            // http://localhost:8000/admin/userinfo_edit

            $('.btn-success').on('click', function (e) {
                // 阻止表达提交默认事件 
                e.preventDefault();
                // alert(1)
                // var str = $('form').serialize();
                // console.log(str);
                //判断每个输入框里面的值不能为空
                console.log($('#user_pic')[0].files.length); //判断有没有上传图片


                var usernameVal = $('#username').val().trim();
                var nicknameVal = $('#nickname').val().trim();
                var emailVal = $('#email').val().trim();
                var passwordVal = $('#password').val().trim();
                var imgUrl = $('#user_pic')[0].files.length
                if (usernameVal === '' || nicknameVal === '' || emailVal === '' ||
                    passwordVal === '' || imgUrl === 0) {
                    alert('请上传完整的信息')
                    return false;
                }
                //  var data= new FormData(表达dom对象)
                var formData = new FormData($('#myform')[0]) //原生的表单formData方法
                // console.log(data);
                $.ajax({
                    url: 'http://localhost:8000/admin/userinfo_edit',
                    data: formData,
                    type: 'post',
                    contentType: false, //不需要jquery 我们的formData
                    processData: false, //不需要jquery 我们的formData
                    success: function (res) {
                        console.log(res);
                        $('form')[0].reset(); //加一下清除表单内容(清除缓存)
                        if (res.code === 200) {
                            setTimeout(function () {

                                // window.location.href = './login.html' //从user页面跳转到login
                                window.parent.location.href =
                                    './login.html' //表示user父级页面index页面跳转到登陆login页面

                            }, 2000)
                        }
                    }
                })

            })
            //上传图片预览信息 
            $('#user_pic').on('change', function () {
                // console.log(1);
                var aa = $('#user_pic')[0].files[0]; //原生图片信息
                console.log(aa);
                // 采用 url
                var mysrc = URL.createObjectURL(aa) //图片本身是2进制 在内存当中创建一个base64或者是二进制格式 
                console.log(mysrc);
                $('#img').prop('src', mysrc)
            })









        })
    </script>

</body>

</html>